<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>职位管理</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="keywords" content="Hosting Store Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
    <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>

    <%--<link href="${pageContext.request.contextPath}/static/admin/assets/css/minimal.css" rel="stylesheet"/>--%>
    <link href="${pageContext.request.contextPath}/static/home/css/bootstrap.css" rel='stylesheet' type='text/css' />

    <script src="${pageContext.request.contextPath}/static/home/js/jquery-1.11.1.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/admin/assets/js/vendor/bootstrap/bootstrap.min.js"></script>
    <!-- Custom Theme files -->
    <link href="${pageContext.request.contextPath}/static/home/css/style.css" rel='stylesheet' type='text/css' />
    <!-- Custom Theme files -->
    <link href="${pageContext.request.contextPath}/static/home/css/job_tag_manage.css" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/admin/assets/js/vendor/chosen/css/chosen.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/admin/assets/js/vendor/chosen/css/chosen-bootstrap.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/admin/assets/js/vendor/datatables/css/dataTables.bootstrap.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/admin/assets/js/vendor/datatables/css/ColVis.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/admin/assets/js/vendor/datatables/css/TableTools.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/admin/assets/js/vendor/videobackground/css/jquery.videobackground.css">
    <!-- webfonts -->
    <link href='${pageContext.request.contextPath}/static/home/css/font-awesome.css' rel='stylesheet' type='text/css'/>
    <!-- webfonts -->
    <!-- dropdown -->
    <script src="${pageContext.request.contextPath}/static/home/js/jquery.easydropdown.js"></script>

    <link href="${pageContext.request.contextPath}/static/home/css/nav.css" rel="stylesheet" type="text/css" media="all"/>
    <link href="${pageContext.request.contextPath}/static/admin/css/sweetalert.css" rel="stylesheet">

    <!-- start-smoth-scrolling -->
    <script src="${pageContext.request.contextPath}/static/admin/js/sweetalert.min.js"></script>
    <!-- start-smoth-scrolling -->
    <!-- webfonts -->
    <%--<link href='http://fonts.useso.com/css?family=Ubuntu:300,400,500,700' rel='stylesheet' type='text/css'>--%>
    <!-- webfonts -->
    <!-- start-smoth-scrolling -->
    <%--<link href="${pageContext.request.contextPath}/static/admin/assets/css/vendor/bootstrap/bootstrap.min.css" rel="stylesheet"/>--%>
    <link href="${pageContext.request.contextPath}/static/home/css/company_style.css" rel="stylesheet" type="text/css"/>

    <style>
        .col-md-3 {
            width: 20% !important;
        }

        .bg-transparent-white-2 {
            background-color: rgba(255, 255, 255, 0.2) !important;
            color: #000;
        }
    </style>
</head>
<!-- Header Starts Here -->
<div class="banner inner-banner" >
    <%@include file="../header.jsp"%>

    <div id="breadcrumb_wrapper">
        <div class="container">

            <h3><strong>职位标签管理</strong></h3>
            <h6>&nbsp;</h6>

            <div class="clearfix"></div>
        </div>
    </div>
</div>
<div class="clearfix"> </div>
<!-- Header Ends Here -->

<!--Main Starts Here-->
<div class="contact">
    <div class="container">

        <div class="tab-content" >
            <a href="#" id="addRow" class="btn btn-green btn-xs add-row">新建标签</a>

            <div class="tile-body color transparent-black rounded-corners tab-pane fade in active " id="home">

                <div class="table-responsive">
                    <table  class="table table-datatable table-custom inlineEditDataTable">
                        <thead>
                        <tr>
                            <!--<th class="no-sort">使用标签</th>-->
                            <th class="no-sort">标签名称</th>
                            <th class="no-sort tools">操作</th>
                        </tr>
                        </thead>
                        <tbody>

                        </tbody>
                    </table>
                </div>

            </div>

            <div class="tile-footer bg-transparent-white-2 rounded-bottom-corners">
                <div class="row">

                    <div class="col-sm-offset-4 col-sm-4 text-center">
                        <small class="inline table-options paging-info"></small>
                    </div>

                    <div class="col-sm-4 text-right sm-center">
                        <ul class="pagination pagination-xs nomargin pagination-custom">

                        </ul>
                    </div>

                </div>
            </div>
        </div>

    </div>
</div>
<!--Main Ends Here-->

<table id="table_td_temp" style="display:none">
    <tbody id="template-list-tbody">
        <tr id="" class="odd gradeA">
            <td>傻逼熊</td>
            <td class="actions"><a class="edit" href="#">编辑 </a><a class="delete" href="#">删除</a></td>
        </tr>
    </tbody>
</table>

<!-- #Footer -->
<%@include file="../footer.jsp"%>
<!-- /#Footer -->
<!-- here stars scrolling icon -->
<script type="text/javascript" src="${pageContext.request.contextPath}/static/home/js/move-top.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/home/js/easing.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/home/js/moment.min.js"></script>
<script src="${pageContext.request.contextPath}/static/admin/js/page.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/admin/assets/js/vendor/mmenu/js/jquery.mmenu.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/admin/assets/js/vendor/sparkline/jquery.sparkline.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/admin/assets/js/vendor/nicescroll/jquery.nicescroll.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/admin/assets/js/vendor/animate-numbers/jquery.animateNumbers.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/admin/assets/js/vendor/videobackground/jquery.videobackground.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/admin/assets/js/vendor/blockui/jquery.blockUI.js"></script>
<script src="${pageContext.request.contextPath}/static/admin/assets/js/vendor/datatables/jquery.dataTables.min.js"></script>
<script src="${pageContext.request.contextPath}/static/admin/assets/js/vendor/datatables/ColReorderWithResize.js"></script>
<script src="${pageContext.request.contextPath}/static/admin/assets/js/vendor/datatables/colvis/dataTables.colVis.min.js"></script>
<script src="${pageContext.request.contextPath}/static/admin/assets/js/vendor/datatables/tabletools/ZeroClipboard.js"></script>
<script src="${pageContext.request.contextPath}/static/admin/assets/js/vendor/datatables/tabletools/dataTables.tableTools.min.js"></script>
<script src="${pageContext.request.contextPath}/static/admin/assets/js/vendor/datatables/dataTables.bootstrap.js"></script>

<script type="text/javascript">
    jQuery(document).ready(function($) {
        $(".scroll").click(function(event){
            event.preventDefault();
            $('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
        });
    });
</script>
<!-- /#Footer -->
<!-- here stars scrolling icon -->
<script type="text/javascript">
    $(document).ready(function() {
        /*
         var defaults = {
         containerID: 'toTop', // fading element id
         containerHoverID: 'toTopHover', // fading element hover id
         scrollSpeed: 1200,
         easingType: 'linear'
         };
         */

        $().UItoTop({ easingType: 'easeOutQuart' });

    });
</script>

<!-- //here ends scrolling icon -->

<script>
    var show = "";
    var fetchData = function (furl) {
        if(furl==null) {
            url = "${pageContext.request.contextPath}/home/tag/getTagList.action?p=1";
        }else{
            url = furl;
        }

        $.ajax({
            type:'get',
            url:url,
            success:function(json){
                console.log(json);
                show = json.show;
                if (show=="" ||show.totalRows == 0) {
//                    $("#home table tbody").html('<tr><td colspan="10" align="center">暂无记录</td></tr>');
//                    $('.paging-info').html("showing 0-0 of 0 items");
//                    $('.pagination').html("");
                    return;
                } else {
                    var list = json.data;
//                    var body = $("#home table tbody");
//                    var temp_body = $('#template-list-tbody');
//                    var tds = $('#table_td_temp td');
//                    var string = "";
                    for (var i in list) {
//                        $('#table_td_temp tr').attr("id", list[i].job_tag_id);
//                        tds[0].innerHTML = list[i].job_tag_name;
//                        string += temp_body.html();
                        newRow(list[i].job_tag_id, list[i].job_tag_name);
                    }
                    //body.html(string);
//                    if(show.currentPage == show.totalPage){
//                        $('.paging-info').html("showing "+(show.startIndex+1)+"-"+show.totalRows+" of "+show.totalRows+" items");
//                    }else {
//                        $('.paging-info').html("showing "+(show.startIndex+1)+"-"+show.endIndex+" of "+show.totalRows+" items");
//                    }
//                    make_page(show, '.pagination','?');
                }
            }
        });
    };

    fetchData();

    function newRow (a,b) {
        // Only allow a new row when not currently editing

        var oTable02 = $('.inlineEditDataTable').dataTable();
        var aiNew = oTable02.fnAddData([ '',  '<a class="edit" href="">编辑 </a>', '<a class="delete" href="">删除</a>' ]);
        var nRow = oTable02.fnGetNodes(aiNew[0]);
        var id = a;
        var text = b;

        nRow.id=id;
        oTable02.fnUpdate( text, nRow, 0, false );
        oTable02.fnUpdate( '<a class="edit" href="#">编辑 </a><a class="delete" href="#">删除</a>', nRow, 1, false );
        oTable02.fnDraw();
        $(nRow).find('td:last-child').addClass('actions');
    }


    function delete_confirm(nRow, oTable02) {
        swal({
            title: "",
            text: "确认删除？",
            type: "warning",
            showCancelButton: true,
            closeOnConfirm: true,
            confirmButtonText: "确定",
            confirmButtonColor: "#ec6c62"
        }, function () {
            oTable02.fnDeleteRow(nRow);
            deleteJobs(nRow.id);
        });
    }

    function deleteJobs(ids){
        $.ajax({
            url:"${pageContext.request.contextPath}/home/tag/delete.action",
            type:'post',
            dataType:'json',
            data:'tag_id='+ids,
            success:function(json){
                if(json != 1){
                    swal("", "删除错误！", "error");
                }else{
                    swal("", "删除成功！", "success");
                }
            }
        });
    }

    function insertTag(oTable02, nRow) {
        var jqInputs = $('input', nRow);
        console.log(jqInputs[0].value);
        var name = jqInputs[0].value;
        $.ajax({
            url:"${pageContext.request.contextPath}/home/tag/insert.action",
            type:'post',
            dataType:'json',
            data:'name='+name,
            success:function(json){
                if(json == 0){
                    swal("", "服务器错误！", "error");
                }else if(json == -1) {
                    swal("", "未登录！", "error");
                }
                else{
                    nRow.id=json;
//            console.log(nRow.childNodes);
                    oTable02.fnUpdate( jqInputs[0].value, nRow, 0, false );
                    oTable02.fnUpdate( '<a class="edit" href="#">编辑 </a><a class="delete" href="#">删除</a>', nRow, 1, false );
                    oTable02.fnDraw();
                }
            }
        });
    }


    function updateTag(oTable02, nRow) {
        var jqInputs = $('input', nRow);
        console.log(jqInputs[0].value);
        var tag_id = nRow.id;
        var name = jqInputs[0].value;
        console.log('tag_id='+tag_id+'&name='+name);
        $.ajax({
            url:"${pageContext.request.contextPath}/home/tag/update.action",
            type:'post',
            dataType:'json',
            data:{'tag_id':tag_id,'name':name},

            success:function(json){
                if(json == 0){
                    swal("", "服务器错误！", "error");
                }
                else{
                    oTable02.fnUpdate( jqInputs[0].value, nRow, 0, false);
                    oTable02.fnUpdate( '<a class="edit" href="#">编辑 </a><a class="delete" href="#">删除</a>', nRow, 1, false );
                    oTable02.fnDraw();
                }
            }
        });
    }

    $(function() {

        // Add custom class to pagination div
        $.fn.dataTableExt.oStdClasses.sPaging = 'dataTables_paginate paging_bootstrap paging_custom';

        /*******************************************************/
        /**************** INLINE EDIT DATATABLE ****************/
        /*******************************************************/

        function restoreRow (oTable02, nRow){
            var aData = oTable02.fnGetData(nRow);
            var jqTds = $('>td', nRow);

            for ( var i=0, iLen=jqTds.length ; i<iLen ; i++ ) {
                oTable02.fnUpdate( aData[i], nRow, i, false );
            }

            oTable02.fnDraw();
        };



        function editRow (oTable02, nRow){
            var aData = oTable02.fnGetData(nRow);
            var jqTds = $('>td', nRow);
            jqTds[0].innerHTML = '<input type="text" value="'+aData[0]+'">';
            jqTds[1].innerHTML = '<a class="edit save" href="#">保存 </a><a class="delete" href="#">删除</a>';
        };

        function saveRow (oTable02, nRow){


            var id=nRow.id;
            console.log(nRow.id);
            if(id==''){
                insertTag(oTable02, nRow);
            }
            else{
                updateTag(oTable02, nRow);
            }
//            var jqInputs = $('input', nRow);
//            console.log(jqInputs[0].value);
////            console.log(nRow.childNodes);
//            oTable02.fnUpdate( jqInputs[0].value, nRow, 0, false );
//            oTable02.fnUpdate( '<a class="edit" href="#">编辑 </a><a class="delete" href="#">删除</a>', nRow, 1, false );
//            oTable02.fnDraw();
        };



        var oTable02 = $('.inlineEditDataTable').dataTable({
            "sDom":
            "t"+
            "<'row'<'col-md-4'><'col-md-4 sm-center'i><'col-md-4 text-right sm-center'>p>",
            "oLanguage": {
                "sSearch": ""
            },
            "aoColumnDefs": [
                { 'bSortable': false, 'aTargets': [ "no-sort" ] }
            ],
            "fnInitComplete": function(oSettings, json) {
                $('.dataTables_filter input').attr("placeholder", "关键词");
                $('.dataTables_filter input').attr("class", "search");
            }
        });

        // Append add row button to table
        var addRowLink = '<a href="#" id="addRow" class="btn btn-green btn-xs add-row">Add row</a>'
        $('#inlineEditDataTable_wrapper').append(addRowLink);

        var nEditing = null;

        // Add row initialize
        $('#addRow').click( function (e) {
            e.preventDefault();

            // Only allow a new row when not currently editing
            if ( nEditing !== null ) {
                return;
            }

            var aiNew = oTable02.fnAddData([ '',  '<a class="edit" href="">编辑 </a>', '<a class="delete" href="">删除</a>' ]);
            var nRow = oTable02.fnGetNodes(aiNew[0]);
            editRow(oTable02, nRow);
            nEditing = nRow;

            $(nRow).find('td:last-child').addClass('actions');
        });

        // Delete row initialize
        $(document).on( "click", ".inlineEditDataTable a.delete", function(e) {
            e.preventDefault();

            var nRow = $(this).parents('tr')[0];
            //删除确认
            delete_confirm(nRow, oTable02);
            nEditing=null;
        });

        // Edit row initialize
        $(document).on( "click", ".inlineEditDataTable a.edit", function(e) {
            e.preventDefault();

            /* Get the row as a parent of the link that was clicked on */
            var nRow = $(this).parents('tr')[0];

            if (nEditing !== null && nEditing != nRow){
                /* A different row is being edited - the edit should be cancelled and this row edited */
                restoreRow(oTable02, nEditing);
                editRow(oTable02, nRow);
                nEditing = nRow;
            }
            else if (nEditing == nRow && this.innerHTML == "保存 ") {
                /* This row is being edited and should be saved */
                saveRow(oTable02, nEditing);
                nEditing = null;
            }
            else {
                /* No row currently being edited */
                editRow(oTable02, nRow);
                nEditing = nRow;
            }
        });
    })

</script>
</body>
</html>
